<!--
 * @Author: boyyang
 * @Date: 2022-02-04 10:36:32
 * @LastEditTime: 2022-02-04 13:31:06
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\chatRoom\components\sysMessage.vue
-->

<template>
    <div class="message-box" v-if="props.isShow" @click="close">
        <div class="message-content" @click.stop>
            <div class="list-wrapper">
                <span class="close-all">
                    <i class="iconfont icon-xiangqing" @click="clearMessage"></i>
                </span>
                <div class="list-item" v-for="(item, i) in sysMessageList" :key="i">
                    {{ item.payload.handleMessage }}
                    <!-- v-show="item.payload.operationType == 1" -->
                    <div class="btn-group">
                        <span v-show="item.payload.operationType == 1">
                            <i class="iconfont icon-success" @click="agreeReject(0, item)"></i>
                        </span>
                        <span v-show="item.payload.operationType == 1">
                            <i class="iconfont icon-error" @click="agreeReject(1, item)"></i>
                        </span>
                        <!-- <div class="btn-left" @click="agreeReject(0, item)">同意</div>
                        <div class="btn-right" @click="agreeReject(1, item)">拒绝</div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
interface ISysMessageProps {
    isShow: boolean,
    sysMessageList?: any[]
}

interface ISysMessageEmits {
    (e: 'update:isShow', val: boolean): void;
    (e: 'agreeReject', val: number, message: any): void;
    (e: 'clearMessage', message: any): void
}

const props = withDefaults(defineProps<ISysMessageProps>(), {
    isShow: false
})

const emits = defineEmits<ISysMessageEmits>()

const close = () => {
    emits('update:isShow', false)
}

const agreeReject = (index: number, message: any) => {
    emits('agreeReject', index, message)
}

const clearMessage = (message: any) => {
    emits('clearMessage', message)
}
</script>

<style scoped lang="scss">
.message-box {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgba(0, 0, 0, 0.5);

    .message-content {
        box-sizing: border-box;
        width: 400px;
        height: 500px;
        background-color: #fff;
        border-radius: 2px;

        box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);

        .list-wrapper {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            position: relative;
            .list-item {
                box-sizing: border-box;
                width: 100%;
                height: 30px;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                background-color: #44cef6;
                margin: 35px 0 5px;
                padding-left: 5px;
                color: whitesmoke;

                position: relative;

                .btn-group {
                    position: absolute;
                    top: 0;
                    right: 5px;
                    height: 100%;

                    display: flex;
                    align-items: center;

                    span {
                        margin: 0 5px;

                        i {
                            cursor: pointer;
                            &:hover {
                                color: #cb3a56;
                            }
                        }
                    }
                }
            }

            .close-all {
                position: absolute;
                right: 10px;
                top: 10px;

                i {
                    font-size: 20px;
                }
            }
        }
    }
}
</style>
